<template>
    <!-- 导航栏 -->
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/home' }">
            <h3>首页</h3>
        </el-breadcrumb-item>

        <el-breadcrumb-item :to="{ path: '/inquiries' }">
            <h3>当前页面</h3>
        </el-breadcrumb-item>

    </el-breadcrumb>


    <!-- 走马灯    gutter 属性来指定列之间的间距, col 组件的 offset 属性可以指定分栏偏移的栏数。 -->
    <!-- <el-row :gutter="20" class="el-form-item">
        <el-col :span="18" :offset="2">
            <div class="block text-center" style="height: 100px">
                <el-carousel height="auto" autoplay>
                    <el-carousel-item v-for="item in imglist" :key="item.id" style="height: 100px">
                         <h3 class="small justify-center" >height 100px</h3> 
                        <img :src="item.idview" class="image">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </el-col>
        <el-col :span="4"></el-col>
    </el-row> -->


    <!-- gutter 支持列间距  span 是大小  -->
    <el-row :gutter="20" class="el-form-item">
        <el-col :span="2"></el-col>
        <el-col :span="15" >
            <div class="mt-4">
                <!-- v-model 是双向绑定， -->
                <el-input v-model="input" placeholder="检索用例标题的关键字" class="input-with-select">
                    <!-- append 代表放在紧贴依赖组件的后面   prepend 代表放在前面-->
                    <template #append>
                        <el-button @click="Retrieval">
                            <el-icon>
                                <Search />
                            </el-icon>
                        </el-button>
                    </template>
                </el-input>
            </div>

        </el-col>

        <el-col :span="4">
            <el-button type="primary" @click="download">下载所选用例</el-button>
        </el-col>

    </el-row>

    <!--list内容-->
    <el-row class="el-row" :gutter="20">
        <el-col :span="2"></el-col>
        <el-col :span="20">
            <el-table ref="multipleTableRef" :data="querylist" :border="true" style="width: 100%"
                @selection-change="handleSelectionChange">

                <!-- data  querylist 返回的数据 要和每个列表中的 prop 数据一致才可以正常显示  prop显示的值都是从querylist中获取到的 -->
                <el-table-column type="selection" width="35"/>

                <!-- <el-table-column  width="10" >
                    <template #default="scope">{{ scope.row.date }}</template>
                </el-table-column> -->

                <el-table-column prop="pk" label="ID" width="40" />
                <el-table-column prop="fields.mod" label="模块" width="80" />
                <el-table-column prop="fields.title" label="用例标题" width="160" />
                <el-table-column prop="fields.presets" label="预置条件" width="160" />
                <el-table-column prop="fields.anticipate" label="预期结果" width="160" />
                <el-table-column prop="fields.results" label="测试结果" width="100" />
                <el-table-column prop="fields.createname" label="创建人" width="100" />
                <el-table-column prop="fields.create_time" label="创建日期" width="160" />
                <el-table-column prop="fields.update_time" label="更新日期" width="160" />
                <el-table-column prop="fields.is_active" label="当前状态" width="200" />
            </el-table>

        </el-col>
        <el-col :span="2"></el-col>
    </el-row>


    <el-row>
        <el-col :offset="4">
            <div class="demo-pagination-block">
                <!-- <div class="demonstration">All combined</div> -->
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>

        </el-col>
    </el-row>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ArrowRight, Search } from '@element-plus/icons-vue'    //图标显示引用
import { all_testcase, designate_testcase } from '../../api/workers'
import { ElMessage } from 'element-plus';


const input = ref('')
// 返回查询的列表
const querylist = ref([])
// 当前页面
const currentPage = ref()
// 页面大小
const pageSize = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)


const checkBoxlist = ref([])

const download = () => {
    console.log('xxxxxdownload');

}



// 走马灯图片列表
const imglist = ref([
    { id: 0, idview: '../src/static/img/1.jpg' }
])

function handleSizeChange() {
    console.log(`handleSizeChange items per page: ${pageSize.value}`)
}
function handleCurrentChange() {
    console.log(`current page: handleCurrentChange :${currentPage.value}`)

}

// const handleSelectionChange = (event) => {
//     const selectedValue = event.target.value;
//     // console.log(selectedValue);
// }

function handleSelectionChange(params) {
    console.log("handleSelectionChange", params);
    checkBoxlist.value = params
    console.log(checkBoxlist.value);
}


// 模糊匹配 标题字段
function Retrieval() {
    if (input.value) {     //input的是否有数据判断
        ElMessage({
            message: input.value,
            type: 'success',
        })
        designate_testcase(input.value).then(
            res => {
                querylist.value = res.data.msg
                console.log(querylist.value);

            }
        )
    }
    else {
        ElMessage({
            message: "Please input  Related fields ",
            type: 'error',
        })
    }

}

// 查询所有的用例
function search_all() {
    all_testcase().then(
        res => {
            querylist.value = res.data.msg
            console.log(querylist.value);

        }
    )
}


// 加载 已经完成的任务和状态
onMounted(() => {
    search_all()

})

</script>


<style lang='less' scoped>
.el-form-item {
    margin-bottom: 20px;
}

.carousel-item {
    color: #475669;
    opacity: 0.75;
    margin: 0;
    text-align: center;
}

.el-carousel-item {
    color: #475669;
    opacity: 0.75;
    display: flex;
    align-items: center;
    margin: 0;
    text-align: center;
    height: 100%;
}
</style>